<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
    <meta name="renderer" content="webkit">
    <link rel="stylesheet" type="text/css" href="/indexStyle/js/bootstrap.css">
    <link rel="stylesheet" href="/indexStyle/css/index.css"/>
    <link rel="stylesheet" href="/component/pear/css/pear.css"/>
    <link rel="stylesheet" href="/admin/css/other/console2.css"/>
    <style>
        .pear-card2 {
            background-color: rgb(45 28 28);
            /*四台和13台来回切换*/
            /*height: 395px;*/
        }

        .webui-popover .webui-popover-content {
            overflow: hidden !important;
        }

        .layui-input {
            background-color: #040F3C;
            color: #00ffff;
        }
    </style>
</head>
<body>
<!--头部-->
<div class="header">
    智能柜数据详情
</div>
<div class="main clearfix">
    <div class="layui-row layui-col-space20">
        <div class="layui-col-md3" style="width: 31%;">
            <div class="border-container" style="min-height: 424px;">
                <div class="name-title">
                    近期档案档案操作记录
                </div>
                <table class="table table-kingdargen">
                    <thead>
                    <tr>
                        <th>文件名</th>
                        <th>类型</th>
                        <th>机柜编号</th>
                        <th>操作时间</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="collect,iterStat : ${fileLogList}">
                        <td th:text="${collect.file_name}"></td>
                        <td th:text="${collect.borrowing_type}"></td>
                        <td th:text="${collect.number}"></td>
                        <td th:text="${collect.create_time}"></td>
                    </tr>
                    </tbody>
                </table>
                <span class="top-left border-span"></span>
                <span class="top-right border-span"></span>
                <span class="bottom-left border-span"></span>
                <span class="bottom-right border-span"></span>
            </div>
        </div>
        <div class="layui-col-md6" style="width: 38%;">
            <div class="border-container"
                 style="min-height: 424px;max-height: 424px;display: flex;flex-direction: column;flex-wrap: nowrap;justify-content: center;">
                <div class="layui-row layui-col-space10" style="overflow: auto;">
                    <div class="layui-col-md3 layui-col-sm3 layui-col-xs3 el2"
                         th:id="${#strings.replace(dict.number,'#','')}" th:each="dict:${hostList}">
                        <div class="pear-card2" style="display: flex;flex-direction: row;flex-wrap: wrap;align-content: center;
    justify-content: center;">
<!--                            <div class="title" th:text="${dict.ip}"></div>-->
                            <div class="count pear-text" style="margin: auto" th:id="${dict.id}" th:text="${dict.number}"></div>
                        </div>
                    </div>
                </div>

                <span class="top-left border-span"></span>
                <span class="top-right border-span"></span>
                <span class="bottom-left border-span"></span>
                <span class="bottom-right border-span"></span>
            </div>
        </div>
        <div class="layui-col-md3" style="width: 31%;">
            <div class="border-container" style="min-height: 424px;max-height: 424px">
                <div class="name-title">
                    近期入库档案
                </div>
                <table class="table table-kingdargen">
                    <thead>
                    <tr>
                        <th>文件id</th>
                        <th>文件名称</th>
                        <th>责任人</th>
<!--                        <th>年度</th>-->
                        <th>入库时间</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="collect,iterStat : ${archivesList}">
                        <td th:title="${collect.file_position}" th:text="${#strings.abbreviate(collect.file_position,6)}"></td>
                        <td th:title="${collect.file_name}" th:text="${#strings.abbreviate(collect.file_name,6)}"></td>
                        <td th:title="${collect.user_name}" th:text="${#strings.abbreviate(collect.user_name,8)}"></td>
<!--                        <td th:text="${collect.year}"></td>-->
                        <td th:text="${collect.entry_time}"></td>
                    </tr>
                    </tbody>
                </table>
                <span class="top-left border-span"></span>
                <span class="top-right border-span"></span>
                <span class="bottom-left border-span"></span>
                <span class="bottom-right border-span"></span>
            </div>
        </div>
    </div>
    <div class="layui-row layui-col-space20">
        <div class="layui-col-md6">
            <div class="border-container" style="margin-top: 0px">
                <div class="name-title">
                    入库趋势图
                </div>
                <div style="margin-top: 10px;">
                    <form class="layui-form" action="">
                        <div class="layui-form-item layui-inline">
                            <label class="layui-form-label" style="color: rgb(0, 255, 255);">时间</label>
                            <div class="layui-inline" id="selectMonth">
                                <div class="layui-input-inline">
                                    <input type="text" autocomplete="off" th:value="${StartDate}" name="startDate"
                                           id="startDate" class="layui-input"
                                           placeholder="开始月份">
                                </div>
                                <div class="layui-form-mid">-</div>
                                <div class="layui-input-inline">
                                    <input type="text" autocomplete="off" th:value="${endDate}" name="endDate"
                                           id="endDate" class="layui-input"
                                           placeholder="结束月份">
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div id="warehousingLineChart" style="min-height:350px;"></div>
                <ul class="three-pie clearfix">
                    <!--                    <li>-->
                    <!--                        <div class="name-title">-->
                    <!--                            入库饼图-->
                    <!--                        </div>-->
                    <div id="sexrate"></div>
                    <!--                    </li>-->
                    <!--                    <li>-->
                    <!--                        <div id="householdrate"></div>-->
                    <!--                    </li>-->
                </ul>
                <span class="top-left border-span"></span>
                <span class="top-right border-span"></span>
                <span class="bottom-left border-span"></span>
                <span class="bottom-right border-span"></span>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="border-container" style="margin-top: 0px;padding-bottom: 3px;">
                <ul class="teacher-pie clearfix">
                    <li>
                        <div class="name-title">
                            取档比例图
                        </div>
                        <div id="courserate"></div>
                    </li>
                    <li>
                        <div class="name-title">
                            归档比例图
                        </div>
                        <div id="professionrate"></div>
                    </li>
                </ul>
                <div class="name-title" style="margin-top: 10px;">
                    借档和归档柱状图
                </div>
                <div style="margin-top: 10px;">
                    <form class="layui-form" action="">
                        <div class="layui-form-item layui-inline">
                            <label class="layui-form-label" style="color: rgb(0, 255, 255);">时间</label>
                            <div class="layui-inline" id="SelectBorrowMonth">
                                <div class="layui-input-inline">
                                    <input type="text" autocomplete="off" th:value="${StartDate}" name="startDate"
                                           id="borrowStartDate" class="layui-input"
                                           placeholder="开始月份">
                                </div>
                                <div class="layui-form-mid">-</div>
                                <div class="layui-input-inline">
                                    <input type="text" autocomplete="off" th:value="${endDate}" name="endDate"
                                           id="borrowEndDate" class="layui-input"
                                           placeholder="结束月份">
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div id="borrowingRecordHistogram" style="min-height:350px;"></div>
                <span class="top-left border-span"></span>
                <span class="top-right border-span"></span>
                <span class="bottom-left border-span"></span>
                <span class="bottom-right border-span"></span>
            </div>
        </div>
    </div>
</div>
</body>
<script src="/indexStyle/js/jquery.min.js"></script>
<script src="/indexStyle/js/echarts.min.js"></script>
<script src="/indexStyle/js/map/shandong.js"></script>
<script src="/component/layui/layui.js"></script>
<script src="/component/pear/pear.js"></script>
<script src="/indexStyle/js/index.js"></script>
<script th:inline="javascript">
    var StartDate = [[${StartDate}]];
    var endDate = [[${endDate}]];

    layui.use(['popover', 'jquery', 'layer', 'echarts', 'laydate'], function () {
            var layer = layui.layer;
            var $ = layui.jquery;
            var popover = layui.popover;
            let echarts = layui.echarts;
            let laydate = layui.laydate;

            function maxDate() {
                var now = new Date();
                return now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate();
            }

            //日期范围
            laydate.render({
                elem: '#selectMonth',
                max: maxDate(),
                //设置开始日期、日期日期的 input 选择器
                //数组格式为 2.6.6 开始新增，之前版本直接配置 true 或任意分割字符即可
                range: ['#startDate', '#endDate'],
                theme: '#040F3C',
                done: function (value, date, endDate) {
                    // console.log(value); //得到日期生成的值，如：2017-08-18
                    // console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
                    // console.log(endDate);//得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
                    let selectStartDate = date.year + "-" + date.month + "-" + date.date
                    let selectEndDate = endDate.year + "-" + endDate.month + "-" + endDate.date
                    warehousingTrendChart(selectStartDate, selectEndDate)
                },

            });
            //借阅选择日期范围
            laydate.render({
                elem: '#SelectBorrowMonth',
                max: maxDate(),
                //设置开始日期、日期日期的 input 选择器
                //数组格式为 2.6.6 开始新增，之前版本直接配置 true 或任意分割字符即可
                range: ['#borrowStartDate', '#borrowEndDate'],
                theme: '#040F3C',
                done: function (value, date, endDate) {
                    // console.log(value); //得到日期生成的值，如：2017-08-18
                    // console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
                    // console.log(endDate);//得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
                    let selectStartDate = date.year + "-" + date.month + "-" + date.date
                    let selectEndDate = endDate.year + "-" + endDate.month + "-" + endDate.date
                    borrowingRecordHistogram(selectStartDate, selectEndDate);
                },

            });
            //回转柜子数据详情
            let over = function (number,hostId) {
                //trigger:'click', 效果不错trigger:'hover'
                popover.create('#' + number, {
                    title: number + '# 柜子详情', trigger: 'click',
                    animation: 'pop',
                    closeable: true,
                    delay: {
                        show: null,
                        hide: 100
                    },
                    cache: false,
                    placement: 'right-bottom',
                    opacity: 0.98,
                    type: 'iframe',//content type, values:'html','iframe','async'
                    url: '/host/info?id=' + hostId,
                    // width:'auto',
                    height: 300
                })
            }
            $(".el2").mouseover(function (e) {
                let number = $(this).find(".pear-text").text();
                number = number.replace("#", "");
                let hostId = $(this).find(".pear-text").attr("id");
                over(number,hostId)
            })

            // const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
            //入库趋势图
            function warehousingTrendChart(selectStartDate, selectEndDate) {
                $.get('/InsertFileLineChart', {
                    "selectStartDate": selectStartDate,
                    "selectEndDate": selectEndDate
                }).done(function (data) {
                    var warehousingLineChart = echarts.init(document.getElementById('warehousingLineChart'));
                    warehousingLineChart.setOption({
                        color: ['#73DEB3', '#73A0FA', '#FFB761'],
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'line',
                                crossStyle: {
                                    color: '#999'
                                },
                                lineStyle: {
                                    type: 'dashed'
                                }
                            }
                        },
                        grid: {
                            left: '25',
                            right: '25',
                            bottom: '24',
                            top: '75',
                            containLabel: true
                        },
                        toolbox: {
                            // iconStyle: {
                            //     color: '#660000',
                            // },
                            show: true,
                            feature: {
                                mark: {
                                    show: true
                                },
                                // dataZoom: { //数据缩放视图
                                //     show: true,
                                //     title: '数据缩放'
                                // },
                                // title: {
                                //     text: '销量柱状图', //标题文本内容
                                // },
                                magicType: {
                                    type: ['line', 'bar'],
                                    title: {
                                        line: "切换为折线图",
                                        bar: "切换为柱状图",
                                    },
                                },
                                // restore: {
                                //     //配置项还原
                                //     show: true, //是否显示该工具
                                //     title: '还原'
                                // },
                                myTool1: {
                                    show: true,
                                    title: "还原",
                                    icon:
                                        "path://M512 981.333333c-209.866667 0-396.693333-126.026667-466.293333-314.08a35.52 35.52 0 0 1 23.626666-44.426666 38.613333 38.613333 0 0 1 48 20.693333c58.666667 158.933333 217.013333 265.493333 394.666667 265.6s336-106.666667 394.666667-266.133333a37.6 37.6 0 0 1 28.853333-23.626667 38.986667 38.986667 0 0 1 35.786667 11.946667 34.773333 34.773333 0 0 1 7.146666 35.36c-69.386667 188.373333-256.48 314.666667-466.453333 314.666666z m431.36-574.08a37.92 37.92 0 0 1-35.946667-24.266666C849.386667 222.56 690.613333 114.88 512 114.72S174.72 222.346667 116.746667 382.773333A38.72 38.72 0 0 1 69.333333 403.733333a35.786667 35.786667 0 0 1-24.106666-44.373333C113.333333 169.866667 301.013333 42.666667 512 42.666667s398.666667 127.306667 467.146667 316.96a34.56 34.56 0 0 1-4.906667 32.64 38.933333 38.933333 0 0 1-30.88 14.986666z",
                                    onclick: () => {
                                        $("#startDate").val(StartDate);
                                        $("#endDate").val(endDate);
                                        warehousingTrendChart(null, null);
                                    },
                                },
                                saveAsImage: {
                                    //保存为图片
                                    show: true, //是否显示该工具
                                    title: '保存为图片', name: '入库趋势图',
                                },
                            }
                        },
                        xAxis: {
                            type: 'category',
                            data: data.data.xName,
                            nameTextStyle: {
                                color: '#FF0000',
                                fontSize: 20
                            },
                            splitLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            axisLine: {
                                show: false
                            },
                        },
                        yAxis: {
                            type: 'value',
                            axisLabel: {
                                color: '#999',
                                fontSize: 12
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: '#F3F4F4'
                                }
                            },
                            axisTick: {
                                show: false
                            },
                            axisLine: {
                                show: false
                            },
                        },
                        series: [{
                            name: '新增档案:',
                            type: 'line',
                            smooth: true, //平滑处理
                            data: data.data.yName
                        }]
                    });
                    warehousingPieChart(data);
                });
            }

            warehousingTrendChart(null, null);

            //近6个月入库饼图
            function warehousingPieChart(data) {
                var sexrate = echarts.init(document.getElementById('sexrate'));
                // $.get('/InsertFileLineChart').done(function (data) {
                sexrate.setOption({
                    title: {
                        text: '入库比例图',
                        left: 'center',
                        textStyle: {
                            color: '#00ffff',
                        },
                        top: 10
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        bottom: 10,
                        left: 'center',
                        data: data.data.xName,
                        textStyle: {
                            color: '#00ffff',
                        }
                    },
                    series: [
                        {
                            name: '入库饼图',
                            type: 'pie',
                            radius: '50%', //饼图大小。
                            center: ['50%', '50%'],
                            // selectedMode: 'single',
                            // labelLine: {
                            //     show: false
                            // },
                            // label: {
                            //     show: false,
                            //     position: 'center'
                            // },
                            label: {
                                color: '#00ffff',
                            },
                            data: data.data.pieChartData,
                        }
                    ]
                });
                // });
            }

            // 近6个月取档饼图
            function shiftPieChart(data) {
                var courserate = echarts.init(document.getElementById('courserate'));
                // $.get('/borrowingRecordHistogram').done(function (data) {
                courserate.setOption({
                    title: {
                        // text: '近6个月取档比例图',
                        left: 'center',
                        textStyle: {
                            color: '#00ffff',
                        },
                        top: 10
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        bottom: 10,
                        left: 'center',
                        data: data.data.xName,
                        textStyle: {
                            color: '#00ffff',
                        }
                    },
                    series: [
                        {
                            name: '取档饼图',
                            type: 'pie',
                            radius: '50%', //饼图大小。
                            center: ['50%', '45%'],
                            label: {
                                color: '#00ffff',
                            },
                            data: data.data.lendingPieChartData,
                        }
                    ]
                });
                // });
            }

            // 归还档案饼图
            function returnFilePieChart(data) {
                var professionrate = echarts.init(document.getElementById('professionrate'));
                // $.get('/borrowingRecordHistogram').done(function (data) {
                professionrate.setOption({
                    title: {
                        // text: '近6个月取档比例图',
                        left: 'center',
                        textStyle: {
                            color: '#00ffff',
                        },
                        top: 10
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        bottom: 10,
                        left: 'center',
                        data: data.data.xName,
                        textStyle: {
                            color: '#00ffff',
                        }
                    },
                    series: [
                        {
                            name: '归档饼图',
                            type: 'pie',
                            radius: '50%', //饼图大小。
                            center: ['50%', '45%'],
                            label: {
                                color: '#00ffff',
                            },
                            data: data.data.returnPieChartData,
                        }
                    ]
                });
                // });
            }

            // 借阅记录柱状图
            function borrowingRecordHistogram(selectStartDate, selectEndDate) {
                $.get('/borrowingRecordHistogram', {
                    "selectStartDate": selectStartDate,
                    "selectEndDate": selectEndDate
                }).done(function (data) {
                    console.log(data.data)
                    var histogram = echarts.init(document.getElementById('borrowingRecordHistogram'));
                    histogram.setOption({
                        tooltip: {
                            trigger: 'axis',
                        },
                        toolbox: {
                            show: true,
                            feature: {
                                magicType: {
                                    show: true, type: ['line', 'bar'], title: {
                                        line: "切换为折线图",
                                        bar: "切换为柱状图",
                                    }
                                },
                                // restore: {show: true},
                                myTool1: {
                                    show: true,
                                    title: "还原",
                                    icon:
                                        "path://M512 981.333333c-209.866667 0-396.693333-126.026667-466.293333-314.08a35.52 35.52 0 0 1 23.626666-44.426666 38.613333 38.613333 0 0 1 48 20.693333c58.666667 158.933333 217.013333 265.493333 394.666667 265.6s336-106.666667 394.666667-266.133333a37.6 37.6 0 0 1 28.853333-23.626667 38.986667 38.986667 0 0 1 35.786667 11.946667 34.773333 34.773333 0 0 1 7.146666 35.36c-69.386667 188.373333-256.48 314.666667-466.453333 314.666666z m431.36-574.08a37.92 37.92 0 0 1-35.946667-24.266666C849.386667 222.56 690.613333 114.88 512 114.72S174.72 222.346667 116.746667 382.773333A38.72 38.72 0 0 1 69.333333 403.733333a35.786667 35.786667 0 0 1-24.106666-44.373333C113.333333 169.866667 301.013333 42.666667 512 42.666667s398.666667 127.306667 467.146667 316.96a34.56 34.56 0 0 1-4.906667 32.64 38.933333 38.933333 0 0 1-30.88 14.986666z",
                                    onclick: () => {
                                        $("#borrowStartDate").val(StartDate);
                                        $("#borrowEndDate").val(endDate);
                                        borrowingRecordHistogram(null, null);
                                    },

                                },
                                saveAsImage: {show: true, title: '保存为图片', name: '借档和归档柱状图',}
                            },
                        },
                        legend: {
                            show: true,
                            // right:"35%",
                            data: ['取档', '归档'],
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        grid: {
                            top: '18%',
                            right: '5%',
                            bottom: '8%',
                            left: '5%',
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: 'category',
                                data: data.data.xName,
                                splitLine: {
                                    show: false,
                                    lineStyle: {
                                        color: '#3c4452'
                                    }
                                },
                                axisTick: {
                                    show: false
                                },
                                axisLabel: {
                                    textStyle: {
                                        color: "#fff"
                                    },
                                    lineStyle: {
                                        color: '#519cff'
                                    },
                                    alignWithLabel: true,
                                    interval: 0,
                                }
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value',
                                nameTextStyle: {
                                    color: '#fff'
                                },
                                interval: 1,
                                // max: 50,
                                // min: 0,
                                splitLine: {
                                    show: true,
                                    lineStyle: {
                                        color: '#23303f'
                                    }
                                },
                                axisLine: {
                                    show: false,
                                    lineStyle: {
                                        color: '#115372'
                                    }
                                },
                                axisTick: {
                                    show: false
                                },
                                axisLabel: {
                                    textStyle: {
                                        color: "#fff"
                                    },
                                    alignWithLabel: true,
                                    interval: 0

                                }
                            }
                        ],
                        color: ['#76da91', '#f8cb7f', '#FFB761'],
                        series: [
                            {
                                name: '取档',
                                type: 'bar',
                                data: data.data.lendingList,
                            },
                            {
                                name: '归档',
                                type: 'bar',
                                data: data.data.returnList,
                            }
                        ]
                    });
                    returnFilePieChart(data)
                    shiftPieChart(data)
                });
            }

            borrowingRecordHistogram(null, null);
        }
    )
</script>
</html>